{/*

    首页样式,主要颜色已做配置，可用php代替即达成换肤效果

*/}

<style>
    :root {
        /* 菜单常规宽度 */
        --sc-menu-width: 200px;
        /* 菜单折叠控制器颜色 */
        --sc-fold-color: #bbbbbb;
        /* 菜单背景色 */
        --sc-menu-background-color: rgb(48, 65, 86) !important;
        /* 菜单图标颜色 */
        --sc-menu-icon-color:#fff;
        /* 顶级菜单鼠标悬停背景颜色*/
        --sc-menu-top-hover-background-color:rgba(0,0,0,.06) !important;
        /* 菜单字体颜色 */
        --sc-menu-font-color:rgb(191, 203, 217) !important;
        /* 子菜单背景色 */
        --sc-menu-sub-background-color:#1f2d3d;
        /* 子菜单鼠标悬停及选中后背景色 */
        --sc-menu-sub-select-background-color:#001528 !important;
        /* 子菜单选中后字体颜色 */
        --sc-menu-sub-select-font-color:rgb(64, 158, 255) !important;
        /* 子菜单鼠标悬停背景颜色 */
        --sc-menu-sub-hover-background-color:var(--sc-menu-top-hover-background-color)
    }




    .vue--fold,.vue--expand{
        font-size: 22px;
        color: var(--sc-fold-color);
        position: relative;
        top: 6px;
        padding: 0 5px 0 10px;
    }
    .vue--fold:hover,.vue--expand:hover{
        cursor: pointer;
        color: var(--el-color-primary);
    }
    .el-menu--vertical:not(.el-menu--collapse){
        width: var(--sc-menu-width);
    }
    .el-menu.el-menu--vertical {
        background-color: var(--sc-menu-background-color);
        min-height: 100%;
    }
    .el-scrollbar__view{
        height: 100%;
    }
    .el-menu--vertical li:not(.is-active) i{
        color: var(--sc-menu-icon-color);
    }
    .el-sub-menu__title:hover {
        background-color:var(--sc-menu-top-hover-background-color);
    }
    .el-sub-menu__title,.el-menu-item{
        color: var(--sc-menu-font-color)
    }
    .el-menu{
        background-color:var(--sc-menu-sub-background-color);
    }
    .el-menu .el-menu--inline>.el-menu-item:hover{
        background-color: var(--sc-menu-sub-select-background-color);
    }
    .el-menu .el-menu--inline>.el-menu-item:focus,.el-menu .el-menu--inline>.el-menu-item.is-active{
        background-color:var(--sc-menu-sub-select-background-color) ;
        color: var(--sc-menu-sub-select-font-color);
    }
    .el-menu-item:hover{
        background-color: var(--sc-menu-sub-hover-background-color);
    }
</style>